<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.css}"/>
  <link rel="stylesheet" th:href="@{/webjars/AdminLTE/2.4.3/dist/css/AdminLTE.css}"/>
  <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.4.1/css/all.css}"/>

  <script th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
  <script th:src="@{/webjars/vue/2.5.17/dist/vue.js}"></script>
  <script th:src="@{/webjars/axios/0.18.0/dist/axios.js}"></script>
  <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.js}"></script>
  <script th:src="@{/webjars/AdminLTE/2.4.3/dist/js/adminlte.js}"></script>
  <script th:src="@{/webjars/font-awesome/5.4.1/js/all.js}"></script>
  <script th:src="@{/js/ResponseObject.js}"></script>
  <title th:text="${title}">Register</title>
</head>
<body role="application">
<h2 th:text="${title}"></h2>
<form id="form" class="container" role="form">
  <div class="row">
    <table class="table table-striped">
      <tbody>
      <tr>
        <td><label class="label" for="username">Username*:</label></td>
        <td>
          <input type="text" id="username" v-model="account.username"
                 class="form-control input-large"/>
        </td>
      </tr>
      <tr>
        <td><label class="label" for="password">Password*:</label></td>
        <td>
          <input type="password" id="password" v-model="account.password"
                 class="form-control input-large"/>
        </td>
      </tr>
      <tr>
        <td><label class="label" for="firstname">Fist Name*:</label></td>
        <td>
          <input type="text" id="firstname" v-model="account.customer.firstName"
                 class="form-control input-large"/>
        </td>
      </tr>
      <tr>
        <td><label class="label" for="lastname">Last Name*:</label></td>
        <td>
          <input type="text" id="lastname" v-model="account.customer.lastName"
                 class="form-control input-large"/>
        </td>
      </tr>
      <tr>
        <td><label class="label" for="identity">Identity*:</label></td>
        <td>
          <input type="text" id="identity" v-model="account.customer.identity"
                 class="form-control input-large"/>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button type="button" class="btn btn-primary" v-on:click="register(account)">
            Register
          </button>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p id="error-tips" class="alert-error" v-if="hasError">{{tips}}</p>
          <p id="info-tips" class="alert-info" v-else="">{{tips}}</p>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="row">
    <div class="btn btn-outline-info">
      <a th:href="@{/}">Back To Home</a>
    </div>
  </div>

</form>
<script>
  new Vue({
    el: "#form",
    data: {
      hasError: false,
      account: {
        username: "",
        password: "",
        customer: {
          firstName: "",
          lastName: "",
          identity: ""
        }
      },
      tips: "Identity/Last name/Username/Password are mandatory."
    },
    methods: {
      /**
       * 注册账号
       * @param account 账号信息
       */
      register: function (account) {
        var that = this;
        axios
        .post("/account/register", account)
        .then(function (value) {
          that.hasError = false;
          console.log(JSON.stringify(value));
          var account = value.data;
          that.tips = JSON.stringify(account)
        })
        .catch(function (reason) {
          that.hasError = true;
          var r = reason.response;
          var error = r.data[0];
          if (r.status / 100 === 4) {
            that.tips = "Constraint violated : " + error.logref;
          } else if (r.status / 100 === 5) {
            that.tips = "Internal Server Error: " + error.logref;
          }
        });
      }
    }
  });
</script>
</body>
</html>